<template>
  <div class="md-container">
    <Row>
      <!-- 编辑器 -->
      <Col :span="11">
      <Textarea class="editor box card" type="textarea" v-model:value="textarea" rows=20 maxlength=20000
show-word-limit clearable resize="none" placeholder="正文"  >
      </Textarea>
      </Col>
      <!-- 分割线 -->
      <Col :span="1">
      <div class="pipe"></div>
      </Col>
      <!-- 预览 -->
      <Col :span="11">
      <VueMarkdownIt :source='textarea' :plugins='plugins' class="preview box card">
      </VueMarkdownIt>
      </Col>
    </Row>
    <div></div>
    <Button type="primary" style="margin-top: 10px;"> 保存 </Button>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import MarkdownItEmoji from 'markdown-it-emoji'
import MarkdownItDeflist from 'markdown-it-deflist'
import MarkdownItSub from 'markdown-it-sub'
import MarkdownItSup from 'markdown-it-sup'
import MarkdownItAbbr from 'markdown-it-abbr'
import VueMarkdownIt from 'vue3-markdown-it'
// import MarkdownItContainer from 'markdown-it-container'
// import MarkdownItStrikethroughAlt from 'markdown-it-strikethrough-alt'
import 'highlight.js/styles/a11y-dark.css'
import {
  Button, Row, Col, Textarea
} from 'ant-design-vue'

const textarea = ref('')
const plugins = reactive([
  {
    plugin: MarkdownItAbbr
  }, {
    plugin: MarkdownItSub
  }, {
    plugin: MarkdownItSup
  }, {
    plugin: MarkdownItDeflist
  }, {
    plugin: MarkdownItEmoji
  }

])
</script>

<script>
export default {
  components: {
    VueMarkdownIt
  }
}
</script>

<style>
.editor {

}
.box{
  font-size: 20px;
  height: 92% !important;
  margin-top: 4%;
}
.preview {
  background-color: #f8f8f8;
}

.md-container {
  width: 1280px;
  margin: 0 auto;
}

.pipe {
  width: 1px;
  height: 100%;
  margin: 0 auto;
  border-left: 1px solid black
}
</style>
